<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表单案例 </title>
</head>

<body>
    <!-- action数据提交的地址 method数据提交的方式 -->
    <form action="" method="">
        <div>
            <label for="">账号</label>
            <!-- type:text,password,checkbox.... -->
            <!-- type:类型  name：名称  value输入值 -->
            <input type="text" name="" value="张三" maxlength="5">
        </div>


        <div>
            <!-- placehoder提示 -->
            <label for="">密码:</label>
            <input type="password" placeholder="请输入密码">
        </div>


        <div>
            <label for="">性别:</label>
            <!-- name属性相同实现单选 checked默认选择-->
            <!--  lable的for属性实现与input实现关联，单击字时也可以选中-->
            <input id="nv" name="gender" type="radio" value="0" checked><label for="nv">女</label>
            <input id="nan" name="gender" type="radio" value="1"><label for="nan">男</label>
        </div>

        <div>
            <label for="">爱好：</label>
            <input id="cg" name="like" type="checkbox" value="cg" checked><label for="cg">唱歌</label>
            <input id="tw" name="like" type="checkbox" value="tw"><label for="tw">跳舞</label>
            <input id="kdy" name="like" type="checkbox" value="kdy"><label for="kdy">看电影</label>
        </div>

        <div>
            <!-- 下拉列表 -->
            <label for="">籍贯</label>
            <select name="jg">
                <option value="sx">山西</option>
                <option value="hb">河北</option>
                <option value="sd">山东</option>
            </select>
        </div>

        <div>
            <!-- 文本域 -->
            <label for="">介绍：</label>
            <textarea name="desc" id="" cols="5" rows="8" placeholder="自我介绍"></textarea>
        </div>

        <div>
            <label for="">头像</label>
            <input type="file">
        </div>

        <div>
            <!-- 数字输入框 -->
            <label for="">年龄：</label>
            <input type="number" name="num">
        </div>

        <div>
            <!-- 滑块 -->
            <label for="">收入</label>
            <input type="range" min="2344" max="4333">
        </div>

        <div>
            <!--可清空文本框  -->
            <label for="">偶像</label>
            <input type="search">
        </div>

        <div>
            <button>注册</button>
        </div>
    </form>
</body>

</html>